<div class="toolbar"></div>
<div class="p-3">
    <div class="card mb-3">
        <h5 class="card-header">步骤列表</h5>
        <div class="card-body">
            <p class="text-muted">显示当前进度，分步表单常用的组件</p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-3">
                <div class="card-header border-bottom">流程进度</div>
                <div class="pt-3 pb-3">
                    <div class="step-list">
                        <div class="step-item">
                            <div class="d-flex justify-content-center align-items-center w-100">
                                <div class="step-line"></div>
                                <div class="dot-text dot-success ml-1 mr-1">1</div>
                                <div class="step-line bg-success"></div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <div class="ml-2">
                                    <div class="mt-2 mb-2">创建项目</div>
                                    <div><i tsIcon="account" class="mr-1"></i>张三</div>
                                    <div class="mt-2 mb-2">2016-12-12 12:32</div>
                                </div>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="d-flex justify-content-center align-items-center w-100">
                                <div class="step-line bg-success"></div>
                                <div class="dot-text dot-success ml-1 mr-1">2</div>
                                <div class="step-line bg-secondary"></div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <div class="ml-2">
                                    <div class="mt-2 mb-2">部门初审</div>
                                    <div><i tsIcon="account" class="mr-1"></i>李四</div>
                                    <div class="mt-2 mb-2 text-success">发送通知</div>
                                </div>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="d-flex justify-content-center align-items-center w-100">
                                <div class="step-line bg-secondary"></div>
                                <div class="dot-text dot-secondary ml-1 mr-1">3</div>
                                <div class="step-line bg-secondary"></div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <div class="ml-2">
                                    <div class="mt-2 mb-2">财务复核</div>
                                </div>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="d-flex justify-content-center align-items-center w-100">
                                <div class="step-line bg-secondary"></div>
                                <div class="dot-text dot-secondary ml-1 mr-1">4</div>
                                <div class="step-line"></div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <div class="ml-2">
                                    <div class="mt-2 mb-2">完成</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-3">
                <div class="card-header border-bottom">流程进度</div>
                <div class="pt-3 pb-3">
                    <div class="step-list">
                        <div class="step-item">
                            <div class="d-flex justify-content-center align-items-center w-100">
                                <div class="step-line"></div>
                                <div class="dot dot-success ml-1 mr-1"></div>
                                <div class="step-line bg-success"></div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <div class="ml-2">
                                    <div class="mt-2 mb-2">创建项目</div>
                                    <div><i tsIcon="account" class="mr-1"></i>张三</div>
                                    <div class="mt-2 mb-2">2016-12-12 12:32</div>
                                </div>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="d-flex justify-content-center align-items-center w-100">
                                <div class="step-line bg-success"></div>
                                <div class="dot dot-success ml-1 mr-1"></div>
                                <div class="step-line bg-secondary"></div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <div class="ml-2">
                                    <div class="mt-2 mb-2">部门初审</div>
                                    <div><i tsIcon="account" class="mr-1"></i>李四</div>
                                    <div class="mt-2 mb-2 text-success">发送通知</div>
                                </div>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="d-flex justify-content-center align-items-center w-100">
                                <div class="step-line bg-secondary"></div>
                                <div class="dot dot-secondary ml-1 mr-1"></div>
                                <div class="step-line bg-secondary"></div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <div class="ml-2">
                                    <div class="mt-2 mb-2">财务复核</div>
                                </div>
                            </div>
                        </div>
                        <div class="step-item">
                            <div class="d-flex justify-content-center align-items-center w-100">
                                <div class="step-line bg-secondary"></div>
                                <div class="dot dot-secondary ml-1 mr-1"></div>
                                <div class="step-line"></div>
                            </div>
                            <div class="d-flex justify-content-center">
                                <div class="ml-2">
                                    <div class="mt-2 mb-2">完成</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header border-bottom">从上到下</div>
        <div class="card-body d-flex justify-content-around">
            <div class="step-vlist">
                <div class="step-item d-flex">
                    <div class="d-flex flex-column align-items-center">
                        <div class="step-vline"></div>
                        <div class="dot-text dot-success mt-1 mb-1">1</div>
                        <div class="step-vline bg-success"></div>
                    </div>
                    <div class="flex-grow-1 ml-2">
                        <div class="mt-2 mb-2">创建项目</div>
                        <div><i tsIcon="account" class="mr-1"></i>张三</div>
                        <div class="mt-2 mb-2">2016-12-12 12:32</div>
                    </div>
                </div>
                <div class="step-item d-flex">
                    <div class="d-flex flex-column align-items-center">
                        <div class="step-vline bg-success"></div>
                        <div class="dot-text dot-success mt-1 mb-1">2</div>
                        <div class="step-vline bg-secondary"></div>
                    </div>
                    <div class="flex-grow-1 ml-2">
                        <div class="mt-2 mb-2">部门初审</div>
                        <div><i tsIcon="account" class="mr-1"></i>李四</div>
                        <div class="mt-2 mb-2 text-success">发送通知</div>
                    </div>
                </div>
                <div class="step-item d-flex">
                    <div class="d-flex flex-column align-items-center">
                        <div class="step-vline bg-secondary"></div>
                        <div class="dot-text dot-secondary mt-1 mb-1">3</div>
                        <div class="step-vline bg-secondary"></div>
                    </div>
                    <div class="flex-grow-1 ml-2">
                        <div class="mt-2 mb-2">财务复核</div>
                    </div>
                </div>
                <div class="step-item d-flex">
                    <div class="d-flex flex-column align-items-center">
                        <div class="step-vline bg-secondary"></div>
                        <div class="dot-text dot-secondary mt-1 mb-1">4</div>
                        <div class="step-vline"></div>
                    </div>
                    <div class="flex-grow-1 ml-2">
                        <div class="mt-2 mb-2">完成</div>
                    </div>
                </div>
            </div>
            <div class="step-vlist">
                <div class="step-item d-flex">
                    <div class="d-flex flex-column align-items-center">
                        <div class="step-vline"></div>
                        <div class="dot dot-success mt-1 mb-1"></div>
                        <div class="step-vline bg-success"></div>
                    </div>
                    <div class="flex-grow-1 ml-2">
                        <div class="mt-2 mb-2">创建项目</div>
                        <div><i tsIcon="account" class="mr-1"></i>张三</div>
                        <div class="mt-2 mb-2">2016-12-12 12:32</div>
                    </div>
                </div>
                <div class="step-item d-flex">
                    <div class="d-flex flex-column align-items-center">
                        <div class="step-vline bg-success"></div>
                        <div class="dot dot-success mt-1 mb-1"></div>
                        <div class="step-vline bg-secondary"></div>
                    </div>
                    <div class="flex-grow-1 ml-2">
                        <div class="mt-2 mb-2">部门初审</div>
                        <div><i tsIcon="account" class="mr-1"></i>李四</div>
                        <div class="mt-2 mb-2 text-success">发送通知</div>
                    </div>
                </div>
                <div class="step-item d-flex">
                    <div class="d-flex flex-column align-items-center">
                        <div class="step-vline bg-secondary"></div>
                        <div class="dot dot-secondary mt-1 mb-1"></div>
                        <div class="step-vline bg-secondary"></div>
                    </div>
                    <div class="flex-grow-1 ml-2">
                        <div class="mt-2 mb-2">财务复核</div>
                    </div>
                </div>
                <div class="step-item d-flex">
                    <div class="d-flex flex-column align-items-center">
                        <div class="step-vline bg-secondary"></div>
                        <div class="dot dot-secondary mt-1 mb-1"></div>
                        <div class="step-vline"></div>
                    </div>
                    <div class="flex-grow-1 ml-2">
                        <div class="mt-2 mb-2">完成</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="card mt-3">
        <div class="card-header">多级选择</div>
        <div class="card-body">
            <div class="custom-select pointer"></div>
            <div class="card">
                <ts-tabs [tabs]="['省份','城市','区县']" [target]="tsTabs" activeTab="省份"></ts-tabs>
                <div #tsTabs='tsTabs' tsTabs class="card-body">
                    <div tsTab tab='省份'>
                        <div class="m-btn">
                            <button tsBtn *ngFor="let province of provinceDatas">{{province.text}}</button>
                        </div>
                    </div>
                    <div tsTab tab='城市'>

                    </div>
                    <div tsTab tab='区县'>

                    </div>
                </div>
            </div>
            <div class="card mt-2">
                <ts-tabs [tabs]="['省份','城市','区县']" [target]="tsTabsOne" activeTab="省份"></ts-tabs>
                <div class="card-body">
                    <div #tsTabsOne='tsTabs' tsTabs>
                        <div tsTab tab='省份' class="d-flex">
                            <div class="pointer text-primary-hover mr-2">江西省</div>
                            <div class="pointer text-primary-hover mr-2">广东省</div>
                            <div class="pointer text-primary-hover mr-2">福建省</div>
                        </div>
                        <div tsTab tab='城市' class="d-flex">
                            <div class="pointer text-primary-hover mr-2">江西省</div>
                            <div class="pointer text-primary-hover mr-2">广东省</div>
                            <div class="pointer text-primary-hover mr-2">福建省</div>
                        </div>
                        <div tsTab tab='区县' class="d-flex">
                            <div class="pointer text-primary-hover mr-2">江西省</div>
                            <div class="pointer text-primary-hover mr-2">广东省</div>
                            <div class="pointer text-primary-hover mr-2">福建省</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
</div>